<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>火柴人打羽毛球</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="navigate">
        <div class="logo">火柴人打羽毛球</div>
        <div class="operation">
            <table class="operation_bar">
                <tr>
                    <td><a href="./leaderboard.html">排行榜</a></td>
                    <td id="user-info">
                        <a href="./login.html" id="login-link">登录</a>
                        <div id="user-profile" style="display: none;">
                            <img id="user-avatar" src="" alt="头像">
                            <a href="./login.html" id="username"></a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    <!-- 盒子内嵌套iframe网页 -->
    <div class="bg">
        <iframe src="../StickFigureBadminton_game/html/game.html" frameborder="0"></iframe>
    </div>
    
    <!-- 评论区 -->
    <div class="message_area">
        <h2>评论区</h2>
        
        <form class="comment_form" id="commentForm">
            <textarea placeholder="写下你的评论..." id="commentText"></textarea>
            <div class="comment-options">
                <label class="file-upload">
                    <input type="file" id="mediaUpload" accept="image/*,video/*,audio/*" multiple>
                    <span>添加图片</span>
                </label>
                <label class="location-permission">
                    <input type="checkbox" id="location-permission">
                    <span>共享位置</span>
                </label>
                <span id="location-info" style="display: none;"></span>
            </div>
            <div id="media-preview"></div>
            <button type="submit">发表评论</button>
        </form>
        
        <div class="comment_list" id="commentList">
            <!-- 评论将通过JS动态加载 -->
        </div>
    </div>

    <script src="../js/index.js"></script>
</body>
</html>